<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Backdrop Filter</title>
    <style>
        .image-box {
          background-image: url(old-computer.png);
          height: 240px;
          width: 350px;
          background-size: cover;
          border: 2px solid black;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5px;
        }


        .backdrop-box {
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 5px;
          width: 50%;
          height: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        code {
          text-shadow: 1px 1px 2px black;
          color: white;
        }

        body {
          display: flex;
          flex-wrap: wrap;
        }

        .blur {
          backdrop-filter: blur(5px);
        }

        .invert {
          backdrop-filter: invert();
        }

        .grayscale {
          backdrop-filter: grayscale();
        }

        .brightness {
          backdrop-filter: brightness(200%);
        }

        .contrast {
          backdrop-filter: contrast(200%);
        }

        .sepia {
          backdrop-filter: sepia();
        }

        .grayscale-invert-blur {
          backdrop-filter: grayscale() invert() blur(5px);
        }

        .mixed {
          backdrop-filter: grayscale(50%) invert(70%);
        }

        .hue-rotate {
          backdrop-filter: hue-rotate(60deg);
        }

        .saturate {
          backdrop-filter: saturate(4);
        }
    </style>
  </head>
  <body>
    <div class="image-box">
      <div class="backdrop-box grayscale-invert-blur">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box mixed">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box blur">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box invert">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box grayscale">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box brightness">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box contrast">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box sepia">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box hue-rotate">
      </div>
    </div>
    <div class="image-box">
      <div class="backdrop-box saturate">
      </div>
    </div>
  <script>
    const boxes = document.querySelectorAll(".backdrop-box");
    const filterMap = {};
    for (const rule of document.styleSheets[0].cssRules) {
      filterMap[rule.selectorText] = rule.style.backdropFilter;
    }

    updateLabels = () => {
        boxes.forEach(box => {
            const filter = box.classList[1];
            const cssText = filterMap['.'+filter];
            let el = document.getElementById(filter);
            let newEl = document.createElement('code');
            let text = document.createTextNode(box.style.backdropFilter || cssText);
            newEl.appendChild(text);
            newEl.id = filter;
            if (!el)
                box.appendChild(newEl)
            else
                box.replaceChild(newEl, el);
        })
    }

    updateLabels();
  </script>
</html>
